<!DOCTYPE html>
<html ng-app="orderMng">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0"/>

    <title>订单管理</title>

    <link href="/static/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css"/>
    <link href="/static/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/personal.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/orstyle.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/static/js/angular.js"></script>
    <script type="text/javascript" src="/static/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/static/AmazeUI-2.4.2/assets/js/amazeui.js"></script>
</head>
<style>
    .thcenter {
        text-align: center
    }

</style>

<body>
<head th:include="header"/>
<div class="am-cf am-padding">
    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">订单管理</strong> /
        <small>Order</small>
    </div>
</div>

<div ng-controller="orderListMng">
    <table class="am-table am-table-striped am-table-hover am-table-bordered am-table-radius">
        <thead>
        <tr>
            <th>订单编号</th>
            <th>创建时间</th>
            <th>订单金额</th>
            <th>更新时间</th>
            <th>订单状态</th>
            <th>成交时间</th>
            <th>订单操作</th>
            <th>订单明细</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="order : ${orders}">
            <td th:text="${order.stauts}" hidden="hidden"></td>
            <td th:text="${order.orderId}"></td>
            <td th:if="${order.createTime!=null}"
                th:text="${#dates.format(order.createTime,'yyyy-MM-dd')}"></td>
            <td th:if="${order.createTime==null}" th:text="${order.createTime}"></td>
            <td th:text="${order.amout}"></td>
            <td th:if="${order.updateTime!=null}"
                th:text="${#dates.format(order.updateTime,'yyyy-MM-dd')}"></td>
            <td th:if="${order.updateTime==null}">------------</td>
            <td th:switch="${order.stauts}">
                <span th:case="1">未支付</span>
                <span th:case="2">已支付</span>
                <span th:case="3">待确认收货</span>
                <span th:case="4">订单完成</span>
                <span th:case="5">订单关闭</span>
            </td>
            <td th:if="${order.dealTime!=null}"
                th:text="${#dates.format(order.dealTime,'yyyy-MM-dd')}"></td>
            <td th:if="${order.dealTime==null}">------------</td>
            <td th:switch="${order.stauts}">
                <div th:case="1">
                    <button class="am-btn am-btn-primary am-btn-xs" disabled="disabled">发货</button>
                    <button class="am-btn am-btn-danger am-btn-xs" ng-click="send($event,4)">关闭订单</button>
                </div>
                <div th:case="2">
                    <button class="am-btn am-btn-primary am-btn-xs" ng-click="send($event)">发货</button>
                    <button class="am-btn am-btn-danger am-btn-xs" ng-click="send($event,4)">关闭订单</button>
                </div>
                <div th:case="3">
                    <button class="am-btn am-btn-primary am-btn-xs" disabled="disabled">已发货</button>
                    <button class="am-btn am-btn-danger am-btn-xs" ng-click="send($event,4)">关闭订单</button>
                </div>
                <div th:case="4">
                    <button class="am-btn am-btn-success am-btn-xs" disabled="disabled">交易完成</button>
                </div>
                <div th:case="5">
                    <button class="am-btn am-btn-warning am-btn-xs" disabled="disabled">订单关闭</button>
                </div>

                <div class="am-modal am-modal-no-btn" tabindex="-1" th:id="'doc-modal-'+${order.orderId}">
                    <div class="am-modal-dialog">
                        <div class="am-modal-hd">订单明细&nbsp;
                            <span th:text="'编号'+${order.orderId}"></span>
                            <a href="javascript: void(0)" class="am-close am-close-spin"
                               data-am-modal-close="">&times;</a>
                        </div>
                        <div class="am-modal-bd">
                            <table class="am-table am-table-striped am-table-hover am-table-bordered am-table-radius">
                                <thead>
                                <tr>
                                    <th class="thcenter">商品名</th>
                                    <th class="thcenter">数量</th>
                                    <th class="thcenter">单价</th>
                                    <th class="thcenter">总价</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="orderItem : ${order.orderItems}">
                                    <td th:text="${orderItem.itemName}"></td>
                                    <td th:text="${orderItem.itemNums}"></td>
                                    <td th:text="${orderItem.itemPrice}"></td>
                                    <td th:text="${orderItem.itemPrice * orderItem.itemNums}"></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </td>
            <td>
                <button type="button" class="am-btn am-btn-primary" th:id="${order.orderId}" onclick="checkItems(this)">
                    查看明细
                </button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div>
    <input th:value="${page}" hidden="hidden"/>
    <ul class="am-pagination am-pagination-centered">
        <li th:if="${page==1}"><a class="am-disabled">&laquo;</a></li>
        <li th:if="${page!=1}"><a href="#" th:href="@{/adminOrder(page=${page-1})}">&laquo;</a></li>
        <select style="width: 60px;height: 32px;" id="pageSelect" onchange="changePage(this[selectedIndex].value)">
            <option th:each="i : ${#numbers.sequence(1,totalPage)}" th:text="${i}+'页'" th:value="${i}"
                    th:selected="${i==page}">
            </option>
        </select>
        <li th:if="${page == totalPage}"><a class="am-disabled">&raquo;</a></li>
        <li th:if="${page != totalPage}"><a href="#" th:href="@{/adminOrder(page=${page+1})}">&raquo;</a></li>
    </ul>
</div>
</body>
<script type="text/javascript">

    var app = angular.module("orderMng", []);

    app.controller("orderListMng", function ($http, $scope) {

        $scope.send = function ($event, point) {
            var target = $event.target;
            var tds = target.parentNode.parentNode.parentNode.getElementsByTagName("td");
            var stauts = tds[0].innerHTML;
            var orderId = tds[1].innerHTML;
            if (point) {
                stauts = point;
                if (!confirm("确定要关闭订单吗")) {
                    return;
                }
            }

            $http({
                url: '/adminOrder',
                method: 'put',
                params: {
                    orderId: orderId,
                    stauts: stauts
                },
            }).success(function (res) {
                console.log(res.message)
                window.location.reload();
            })
        }


        $scope.showItems = function ($event) {
            var target = $event.target;
            var tds = target.parentNode.getElementsByTagName("td");
            var orderId = tds[1].innerHTML;
            console.log(orderId);

        }

    });

    function changePage(page) {
        window.location.href = "/adminOrder?page=" + page;
    }


    function checkItems(target) {
        var $modal = $('#doc-modal-' + target.id);
        $modal.modal();
    }

</script>
</html>